<template>
    <div>
        <div class="history-detail" v-if="info">
            <div class="form-item">
                <div class="items">
                    <div class="label">预约人姓名</div>
                    <div class="content">
                        {{info.userName}}
                    </div>
                </div>
                <div class="items">
                    <div class="label">预约人身份证</div>
                    <div class="content">{{info.orderCard}}</div>
                </div>
                <div class="items">
                    <div class="label">下单时间</div>
                    <div class="content">{{info.orderTime}}</div>
                </div>
                <div class="items">
                    <div class="label">自提网点</div>
                    <div class="content">{{info.storeName}}</div>
                </div>
                <div class="items">
                    <div class="label">网点地址</div>
                    <div class="content">{{info.totalAddress}}</div>
                </div>
                <div class="items">
                    <div class="label">可取货时间</div>
                    <!--                <div class="content" style="white-space: pre-line;">{{info.appointTime}}</div>-->
                    <div class="content" v-html="info.appointTime" style="white-space: pre-line;"></div>
                </div>
            </div>
            <div class="state form-item">
                <div class="items">
                    <div class="label">取货状态</div>
                    <div class="content" :class="infoState.class">{{infoState.name}}</div>
                </div>
            </div>
            <div class="submit clearfix" v-if="infoState.status==0">
                <el-button type="primary" @click="submit">确认取货</el-button>
            </div>
            <div class="time form-item" v-if="infoState.status==1">
                <div class="items">
                    <div class="label">取货时间</div>
                    <div class="content finish">{{info.receiveTime}}</div>
                </div>
            </div>
        </div>
        <div class="error">{{errorMessage}}</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tk: '',
                info: null,
                errorMessage: ''
            }
        },
        mounted() {
            this.$emit('change', {
                style: {backgroundColor: '#fff'}
            })
            if (this.$route.query.tk) this.tk = this.$route.query.tk
            this.getInfo()
        },
        computed: {
            infoState() {
                let state = {
                    class: '',
                    status: null,
                    name: ''
                }
                if (this.info) {
                    if (Number(this.info.receiveStatus) === 2) {
                        state = {
                            status: 1,
                            class: 'finish',
                            name: '已取货'
                        }
                    } else {
                        if (Number(this.info.orderStatus) === 1) {
                            state = {
                                status: 2,
                                class: 'disable',
                                name: '已过期'
                            }
                        } else {
                            state = {
                                status: 0,
                                class: '',
                                name: '未取货'
                            }
                        }
                    }
                }
                return state
            }
        },
        methods: {
            getInfo() {
                this.$http.get('/orderRecord/getOrderRecordInfo?noAlert=true', {
                    token: this.tk
                }).then(result => {
                    if (result.success) {
                        this.info = result.data
                    } else {
                        this.errorMessage = result.message
                    }
                })
            },
            submit() {
                this.$http.post('/orderRecord/confirmMasksGot?noAlert=true', {
                    orderId: this.info.orderId
                }).then(result => {
                    if (result.success) {
                        this.getInfo()
                        this.$vux.alert.show({
                            content: '取货成功'
                        })
                    } else {
                        this.$vux.alert.show({
                            content: result.message
                        })
                    }
                })
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .history-detail {
        .state {
            margin-top: -.25rem;

            .items {
                line-height: .48rem;

                .content {
                    font-size: .32rem;
                    font-weight: bolder;
                    color: #f2b75d;

                    &.finish {
                        color: #00bf53;
                    }

                    &.disable {
                        color: #333;
                        border-color: #333;
                    }
                }
            }
        }

        .time {
            margin-top: -.25rem;
        }

        .submit {
            min-height: .88rem;
            line-height: .88rem;
            /*width: 90%;*/
            /*margin: 0 auto;*/
            margin-top: .5rem;
            display: block;

            .el-button {
                display: block;
                width: 90%;
                text-align: center;
                border: 1px solid #409EFF;
                border-radius: .06rem;
                margin: 0 auto;

                &.el-button--primary {
                    background-color: #409EFF;
                }
            }
        }

    }

    .error {
        margin-top: .8rem;
        text-align: center;
    }
</style>
